<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/7 21:34
 -->
<template>
  <div class="page">
    <el-row class="mt-4px">
      <el-col :span="24">
        <div class="page-title-xbm2o0s98">
          <g-title>系统快捷入口</g-title>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="mt-10px page-rk">
          <div class="page-rk__item page-card__item">
            <div>
              <i class="icon-portal-site-renwu iconfont-ps"></i>
            </div>
            <span>标准化知识服务系统 </span>
          </div>
          <div class="page-rk__item page-card__item">
            <div>
              <i class="icon-portal-site-keyanfuwu iconfont-ps !text-[#4594D5]"></i>
            </div>
            <span> 协同科研服务</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-10px">
      <el-col :span="12">
        <div class="page-title-xbm2o0s98">
          <g-title>任务待办 </g-title>
        </div>

        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <g-table height="300px" v-bind="rwdb"></g-table>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="page-title-xbm2o0s98">
          <g-title>审批待办 </g-title>
        </div>

        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <g-table height="300px" v-bind="spdb"></g-table>
          <g-pagination v-if="rwdbPage.total" v-bind.sync="rwdbPage" class="mt-8px"></g-pagination>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-10px">
      <el-col :span="12">
        <div class="page-title-xbm2o0s98">
          <g-title>
            <div class="flex justify-between w-full items-center">
              <div>科研公告</div>
              <div class="text-primary text-13px">查看更多>></div>
              <g-pagination v-if="rwdbPage.total" v-bind.sync="rwdbPage" class="mt-8px"></g-pagination>
            </div>
          </g-title>
        </div>
        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <g-table height="300px" v-bind="kygg" class="el-table__header-hidden"></g-table>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="page-title-xbm2o0s98">
          <g-title>
            <div class="flex justify-between w-full items-center">
              <div>标准化知识培训</div>
              <div class="text-primary text-13px">查看更多>></div>
            </div>
          </g-title>
        </div>
        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <g-table height="300px" v-bind="bzhpx" class="el-table__header-hidden"></g-table>
        </div>
      </el-col>
    </el-row>

    <el-row class="mt-10px">
      <el-col :span="24">
        <div class="page-title-xbm2o0s98">
          <g-title> 服务调用概况 </g-title>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <div class="text-[#000] text-center pt-12px">服务接口各月调用次数分布</div>
          <g-chart
            type="line-001"
            :data="chartData.a"
            height="350"
            :series-units="['次数']"
            :series-colors="['#D6E2FB']"
          ></g-chart>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="mt-10px p-12px bg-[#fff] page-card__item">
          <div class="text-[#000] text-center pt-12px">近一月服务接口级别调用占比</div>
          <g-chart type="pie-001" :data="chartData.b" height="350" :series-units="['【单位】']"></g-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GTitle from '@base/title'
import GScrollView from '@base/scroll-view'
export default {
  name: 'Index',
  components: { GScrollView, GTitle },
  data() {
    return {
      rwdbPage: {
        page: 1,
        total: 0,
        size: 5,
        background: true,
        layout: 'total, prev, pager, next'
      },
      rwdb: {
        // 任务待办
        loading: true,
        data: [],
        columns: [
          { type: 'index', label: '序号', width: '120px' },
          { prop: 'index', label: '任务名' },
          { prop: 'index', label: '时间' },
          { prop: 'index', label: '操作', width: '150px' }
        ]
      },
      spdbPage: {
        page: 1,
        total: 0,
        size: 5,
        background: true,
        layout: 'total, prev, pager, next'
      },
      spdb: {
        // 审批待办
        loading: true,
        data: [],
        columns: [
          { type: 'index', label: '序号', width: '120px' },
          { prop: 'index', label: '任务名' },
          { prop: 'index', label: '时间' },
          { prop: 'index', label: '操作', width: '150px' }
        ]
      },
      kygg: {
        // 科研公告
        loading: true,
        data: [],
        columns: [
          { prop: 'index', label: '任务名' },
          { prop: 'index', label: '时间' }
        ]
      },
      bzhpx: {
        // 标准化培训
        loading: true,
        data: [],
        columns: [
          { prop: 'index', label: '任务名' },
          { prop: 'index', label: '时间' }
        ]
      },
      chartData: {
        a: [],
        b: []
      }
    }
  },

  computed: {},

  watch: {},

  created() {
    this.chartData.a = [
      { name: '1月', valuey1: 15 },
      { name: '2月', valuey1: 15 },
      { name: '3月', valuey1: 15 },
      { name: '4月', valuey1: 15 },
      { name: '5月', valuey1: 340 },
      { name: '6月', valuey1: 15 },
      { name: '7月', valuey1: 100 },
      { name: '8月', valuey1: 20 },
      { name: '9月', valuey1: 20 },
      { name: '10月', valuey1: 20 },
      { name: '11月', valuey1: 20 },
      { name: '12月', valuey1: 20 }
    ]

    this.chartData.b = [
      { name: '一级', valuey1: 15 },
      { name: '二级', valuey1: 15 },
      { name: '三级', valuey1: 15 }
    ]
  },

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.page {
  .page-title-xbm2o0s98 {
    background-color: #fff;
    padding: 4px 12px;
  }
  .page-rk {
    display: flex;
    .page-rk__item {
      height: 88px;
      @include flex-center();
      padding: 12px 15px;
      width: 235px;
      background: #fff;
      justify-content: space-between;
      cursor: pointer;
      i {
        display: inline-block;
        flex-basis: 50px;
        font-size: 50px;
        color: #52a474;
      }
      div:nth-child(1) {
        transition: 0.3s;
        width: 50px;
        border-radius: 8px;
        height: 50px;
        @include flex-center();
        i {
          transition: 0.3s;
        }
      }
      span {
        flex: 1;
        color: #8c8c8c;
        font-size: 16px;
        //text-align: right;
        padding-left: 10px;
      }
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        div:nth-child(1) {
          background-color: $--color-success;
          i {
            color: #fff !important;
          }
        }
      }
      & + .page-rk__item {
        margin-left: 10px;
      }
    }
  }

  .el-table__header-hidden {
    ::v-deep .el-table__header-wrapper {
      display: none;
    }
  }

  .page-card__item {
    transition: 0.3s;
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
